<template>
  <div class="container" v-infinite-scroll="load">
    <div class="header">
      <el-image
        style="width: 200px; height: 200px"
        :src="baseUrl + userInfo.avatar"
      />
      <div class="right">
        <span>{{ userInfo.nickname }}</span>
        <div class="menu">
          <div @click="changeMenu(0)" :class="['item', type == 0 ? 'sel' : '']">
            <span>我的关注</span>
          </div>
          <div @click="changeMenu(1)" :class="['item', type == 1 ? 'sel' : '']">
            <span>我的粉丝</span>
          </div>
        </div>
      </div>
    </div>
    <div class="title">{{ type == 0 ? "关注" : "粉丝" }}（{{ num }}）</div>
    <div class="content">
      <div
        class="item"
        @click="onDetail(item.other_id)"
        v-for="(item, index) in list"
        :key="index"
      >
        <el-avatar :size="50" :src="baseUrl + item.other.avatar" />
        <div class="right">
          <div class="info">
            <span>{{ item.other.name }}</span>
            <span>{{ item.other.nickname }}</span>
          </div>
          <el-button
            size="small"
            @click.stop="cancelFollw(item.other_id)"
            v-if="type == 0"
            >取消关注</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { followIndex, followFans, followDel } from "@/http/api";
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { PersistentStore } from "@/stores";
const persistentStore = PersistentStore();
const userInfo = computed(() => persistentStore.userInfo);
const baseUrl = import.meta.env.VITE_API_URL;
const router = useRouter();
const type = ref(0);
const page = ref(0);
const list = ref([]);
const more = ref(true);
const num = ref(0);
onMounted(() => {});

const cancelFollw = async (e) => {
  const { code, data } = await followDel({
    other_id: e,
  });
  if (code == 200) {
    init();
  }
};

const onDetail = (e) => {
  router.push({
    path: "/user",
    query: {
      id: e,
    },
  });
};

const getList = async () => {
  if (type.value == 0) {
    const { data } = await followIndex({
      page: page.value,
      limit: 21,
    });
    data.follow.data.length
      ? list.value.push(...data.follow.data)
      : (more.value = false);
    num.value = data.follow.total;
  } else {
    const { data } = await followFans({
      page: page.value,
      limit: 21,
    });
    data.follow.data.length
      ? list.value.push(...data.follow.data)
      : (more.value = false);
    num.value = data.follow.total;
  }
};

const changeMenu = (e) => {
  type.value = e;
  init();
};

const init = () => {
  page.value = 0;
  list.value = [];
  more.value = true;
};

const load = () => {
  if (more.value) {
    page.value++;
    getList();
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
